<template>
  <div class="upload">
    <el-upload
      list-type="picture-card"
      :action="uploadUrl"
      accept=".jpg, .jpeg, .png, .gif, .bmp, .pdf"
      :on-success="uploadSuccess"
      :on-remove="handleRemove"
      :name="name"
      :file-list="fileList"
      ref="upload"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
  </div>
</template>
<script>
export default {
  name: 'UploadImg',
  props: {
    fileUrlListArr: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      uploadUrl: '/api/createFilingMessage/uploadGoodPicture',
      fileList: [],
      uploadFile: '',
      name: 'multipartFile',
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  watch: {
    fileUrlListArr(v) {
      this.fileList = [...v]
    },
    fileList(v) {
      let list = []
      v.map(item => {
        if (item.response) list.push(item.response.result)
        else list.push(item.url)
      })

      this.$emit('fileUrlList', list)
    }
  },
  computed: {},
  methods: {
    // 删除已上传的图片
    handleRemove(file, fileList) {
      this.fileList = fileList
    },
    // 上传成功
    uploadSuccess(res, file, fileList) {
      this.fileList = fileList
    },
    resetFile() {
      this.$refs.upload.clearFiles()
      this.fileList = []
    }
  }
}
</script>
<style lang="less" scoped>
.upload {
  /deep/.el-upload--picture-card {
    width: 108px !important;
    height: 108px !important;
    line-height: 108px !important;
  }
  /deep/ .el-upload-list__item {
    width: 108px;
    height: 108px;
  }
}
</style>